<template>
  <v-dialog v-model="dialog" title="确认">
    <template #default>
      <v-card>
        <v-card-title>{{ title }}</v-card-title>
        <v-card-text>{{ msg }}</v-card-text>
        <v-card-actions class="d-flex justify-end">
          <v-btn text color="rgb(var(--v-title))" @click="confirm">{{ confirmbtntext }}</v-btn>
          <v-btn text color="rgb(var(--v-subtitle))" @click="cancel">{{ cancelbtntext }}</v-btn>
        </v-card-actions>
      </v-card>
    </template>
  </v-dialog>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "js-confirmation-box",
  computed: {
    ...mapGetters(["t"]),
  },
  props: {
    show: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      default: "提示",
    },
    confirmbtntext: {
      type: String,
      default: "是的",
    },
    cancelbtntext: {
      type: String,
      default: "不了",
    },
    msg: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      dialog: this.show,
    };
  },
  methods: {
    cancel() {
      this.$emit("cancel");
      this.dialog = false;
    },
    confirm() {
      this.$emit("confirm");
      this.dialog = false;
    },
  },
  watch: {
    dialog: function (newVal) {
      this.$emit("jcchange", newVal);
    },
    show: function (newVal) {
      this.dialog = newVal;
    },
  },
};
</script>

<style scoped></style>
